
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#main{
				margin: 0px auto;
				width: 800px;
				height: 600px;
				background-image: url(img/背景.png);
			}
			#top1{
				position: relative;
				/*border: 1px solid;*/
				height: 472px;
			}
			#top1 div{
				width: 63px;
				height: 71px;
				background-image: url(img/苹果.png);
				font-size: 40px;
				text-align: center;
				line-height: 71px;
				color: white;
				position: absolute;
			}
			#top1 .posuiPG{
				width: 138px;
				height: 76px;
				background-image: url(img/破裂苹果.png);
			}
			#bottom1{
				position: relative;
			}
			#an1{
				position: absolute;
				left: 195px;
				top: 52px;
			}
			#an2{
				position: absolute;
				left: 112px;
				top: 36px;
			}
			#an3{
				position: absolute;
				left: 160px;
				top: 4px;
			}
			#an4{
				position: absolute;
				left: 148px;
				top: 78px; 
			}
			#main2{
				position: absolute;
				top: 100px;
				left: 480px;
				display: none; 
			}
			#panDuan p {
			    color: white;
			    font-weight: bold;
			    line-height: 5px;
			    text-indent: 350px;
		    }
		    #lanzi{
		    	position: absolute;
		    	top: 463px;
		    	left: 870px;
		    }
		    #pg{
		    	position: absolute;
		    	top: 32px;
		    	left: 36px;
		    	display: none;
		    }
		</style>
		<script type="text/javascript">
		   var zhengque = 0;
//		   var zhengque1 = 0;
		   var shibai = 0;
		   var shijian = 0;
		    window.onload=function(){
		    	var top1 = document.getElementById("top1")
		    	var main2 = document.getElementById("main2")
//		    	var top2 = document.getElementById("top2");
//		    	var bottom1 = document.getElementById("bottom1");
                var span1 = document.getElementById("span1");
		    	var span2 = document.getElementById("span2");
		    	var span3 = document.getElementById("span3");
		    	var span4 = document.getElementById("span4");
		    	var span5 = document.getElementById("span5");
		    	var lanzi = document.getElementById("lanzi");
		    	var pghh = document.getElementById("pg");
		    }
		     
		    window.onkeydown=function(){
		    	//打苹果
		    	var key = event.keyCode;
		    	for (var i = 0;i <top1.children.length;i++) {
		    		var keycode = top1.children[i].getAttribute("keyCode");
		    		if (key == keycode) {
		    			top1.removeChild(top1.children[i]);
		    			zhengque++;
		    			span2.innerHTML = zhengque + "个";
		    			break;
		    		}
		    	}
		    	
		    }
			function kaiShi(){
				//每隔多少秒创建一个苹果
			 	n = setInterval("chuanPG()",1000);
				//每隔多少秒移动
				s = setInterval("yidongPG()",500);
				//每隔多少秒改变值
				p = setInterval("panDuan()",1000);
			}
			//创建苹果
			function chuanPG(){
				var div = document.createElement("div");
				var num = parseInt(Math.random()*26)+65; //苹果显示A-Z
				div.innerHTML ="&#" + num + ";"; 
				div.setAttribute("keyCode",num);
				var left = parseInt(Math.random()*690)+10;
				div.style.left = left + "px";
				div.style.top = "0px";
				top1.appendChild(div);
			}
			//移动苹果
			function yidongPG(){
			    var div = top1.getElementsByTagName("div");
			    //直接找创建的div
				for (var i = 0;i < div.length;i++) {
					 var t = parseInt(div[i].style.top);
					 t += 10;
					 div[i].style.top = t + "px";
					 //苹果破裂
					 if (t > 370) {
					 	div[i].innerHTML = "";
					 	div[i].className = "posuiPG"
					 	shibai++;
					 	span3.innerHTML = shibai + "个";
					 }
					 if(t > 400){
					 	top1.removeChild(div[i]);
					 }
				}
                //子节点top1.children
//              for (var i = 0;i < top1.children.length;i++) {
//              	var t = parseInt(top1.children[i].style.top);
//              	t += 10;
//              	top1.children[i].style.top = t + "px";
//              	if (t > 370) {
//              		top1.children[i].innerHTML = "";
//              		top1.children[i].className = "posuiPG"
//              	}
//              	if(t > 400){
//              		top1.removeChild(top1.children[i]);
//              	}
//              }
			}
			//暂停苹果
			function zanTing(){
				clearInterval(n);
				clearInterval(s);
				clearInterval(p);
			}
			//结束苹果
			function jieShu(){
				zanTing();
				zhengque = 0;
				shibai = 0;
				shijian = 0;
				span1.innerHTML = "0%";
				span2.innerHTML = "0个";
				span3.innerHTML = "0个";
				span4.innerHTML = "0秒";
				span5.innerHTML = "0字/分钟"
				top1.innerHTML = "";
			}
			//设置菜单
			function shiZhi(){
				var main2 = document.getElementById("main2");
				if (main2.style.display == "block") {
					main2.style.display = "none";
				}else{
					main2.style.display = "block";
				}
			}
			//显示
			function panDuan(){
				shijian++;
				if (zhengque + shibai > 0) {
					span1.innerHTML = parseInt(zhengque/(zhengque+shibai)*100)+"%";
				}
//				span2.innerHTML = zhengque + "个";
//				span3.innerHTML = shibai + "个";
				if (shijian < 10) {
				    span4.innerHTML = "0" + shijian + "秒";
				}else{
					span4.innerHTML = shijian + "秒";
				}
				if (zhengque > 0) {
					span5.innerHTML = parseInt(zhengque / (shijian / 60))+"字/分钟";
				}
				if (zhengque %10 == 0) {
					console.log(zhengque)
				     pghh.style.display = "block";
				}
			}
		</script>
	</head>
	<body>
		<div id="main">
			<div id="top1">
				<!--<div>A</div>-->
			</div>
			<div id="bottom1">
				<!--<input type="button" name="" id="" value="开始" onclick="kaiShi()"/>
				<input type="button" name="" id="" value="暂停" onclick="zanTing()"/>
				<input type="button" name="" id="" value="结束" onclick="jieShu()"/>
				<input type="button" name="" id="" value="设置" onclick="shiZhi()"/>-->
				
				<input type="image" id="an1" src="img/2345截图20161222132520.jpg" onclick="kaiShi()"/>
				<input type="image" id="an2" src="img/2345截图20161222132602.jpg" onclick="zanTing()"/>
				<input type="image" id="an3" src="img/2345截图20161222132501.jpg" onclick="jieShu()"/>
				<input type="image" id="an4" src="img/2345截图20161222132652.jpg" onclick="shiZhi()"/>
			</div>
			<div id="panDuan">
				<p>正确率：<span id="span1">0%</span></p>
				<p>正确：<span id="span2">0个</span></p>
				<p>失败：<span id="span3">0个</span></p>
			    <p>时间：<span id="span4">0秒</span></p>
				<p>速度：<span id="span5">0字/分钟</span></p>
			</div>
			<div id="lanzi">
				<div >
					<img src="img/苹果2.png" id="pg"/>
				</div>
				<img src="img/篮子.png"/>
			</div>
		</div>
		<div id="main2">
			<img src="img/设置.png"/>
		</div>
	</body>
</html>
